<template>
    <div>
        <header class="resviseTop">
            <span class="resvise_title">登录</span>
        </header>
        <div class="logo_img">
            <img src="../../img_myself/logo.png" alt="">
        </div>
        <div class="W_80">
            <div class="flex_login">
                <img src="../../img_myself/account.png" alt="">
                <input type="text" placeholder="请输入账号" v-model="task.user_mobile">
                <img src="../../img_myself/close.png" alt="" @click="removeHTml(1)">
            </div>
            <div class="flex_login">
                <img src="../../img_myself/password.png" alt="">
                <input type="password" placeholder="请输入密码" v-model="task.user_password">
                <img src="../../img_myself/close.png" alt="" @click="removeHTml(2)">
            </div>
            <div class="login_btn" @click="userLogin">登录</div>

            <div class="bottom_infor">
                <div>
                    <p>还没有账号？</p>
                    <router-link to="/task/reg">立即注册</router-link>
                </div>
                <div>
                    <router-link to="/task/Forget">忘记密码</router-link>
                </div>
            </div>
            <p style="margin-top: 1rem;color: #666;text-align: center">1.0老用户默认登陆密码为手机号后六位</p>
        </div>
    </div>
</template>

<script>
    import api from '../../utils/api';

    export default {
        name: "Login",
        data: () => ({
            task: {
                user_mobile: '',
                user_password: ''
            }
        }),
        methods: {
            removeHTml: function (inx) {
                if (inx == 1) {
                    this.task.user_mobile = ''
                } else {
                    this.task.user_password = ''
                }
            },
            userLogin() {
                var that = this;
                api.request('/authorizations', 'post', this.task).then((resp) => {
                    localStorage.setItem('token', resp.data.data.access_token)
                    that.$router.push({path: '/'})
                })
            }
        }
    }
</script>

<style scoped="css">
    .logo_img {
        width: 100%;
        height: 6rem;
        display: flex;
    }

    .logo_img img {
        width: 2.5rem;
        margin: auto;
    }

    .W_80 {
        width: 80vw;
        margin: 0 auto;
        margin-top: 0.1rem;
    }

    ::-webkit-input-placeholder {
        color: #555;
    }

    .flex_login img:first-of-type {
        width: 8vw;
        margin-right: 3vw;
    }

    .flex_login {
        display: flex;
        align-items: center;
        border-bottom: 0.3vw solid #E6E6E6;
        position: relative;
        padding-bottom: 1vw;
    }

    .flex_login img:last-of-type {
        width: 5vw;
        position: absolute;
        right: 0;
    }

    .flex_login input {
        height: 10vw;
        font-size: 4.3vw;
        padding-left: 2vw;
        border: 0;
    }

    .flex_login:nth-of-type(2) {
        margin-top: 0.4rem;
    }

    .login_btn {
        width: 100%;
        background: #2EABFF;
        text-align: center;
        height: 1.3rem;
        line-height:1.3rem;
        -webkit-border-radius: 1.5vw;
        -moz-border-radius: 1.5vw;
        border-radius: 1.5vw;
        color: #fff;
        font-size: 4.2vw;
        margin-top: 0.8rem;
    }

    .bottom_infor {
        margin-top: 0.5rem;
        font-size: 3.8vw;
    }

    .bottom_infor a {
        color: #41A7E9;
    }

    .bottom_infor > div:last-of-type a {
        color: #DA7883;
    }

    .bottom_infor, .bottom_infor > div:first-of-type {
        display: flex;
        justify-content: space-between;
    }


</style>
